import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import vueJsx from "@vitejs/plugin-vue-jsx";
import UnoCSS from "unocss/vite";
import { pxToViewport } from "./plugins/pxto-viewport";
import autoprefixer from "autoprefixer";
// import postCssPxToRem from "postcss-pxtorem";
import path from "path";
const projectRootDir = path.resolve(__dirname);
// 为 Element Plus 按需引入样式。
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    outDir: "vue-temp",
  },
  resolve: {
    alias: {
      "~": projectRootDir,
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8",
          ],
        }),
        pxToViewport()
        // postCssPxToRem({
        //   // 自适应，px>rem转换
        //   rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
        //   propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
        //   selectorBlackList: [".van"], // 过滤掉van-开头的class，不进行rem转换
        //   exclude: "/node_modules", // 忽略包文件转换rem
        // }),
      ],
    },
    preprocessorOptions: {
      scss: {
        additionalData: `@use '@/styles/theme/index.scss' as *;`
      },
    },
  },
  server: {
    port: 9090,
    host: true,
  },
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ["vue", "vue-router"],
      dts: "types/auto-import.d.ts",
      eslintrc: {
        enabled: false,
      },
      resolvers: [ElementPlusResolver()]
    }),
    UnoCSS({
      configFile: "./uno.config.ts",
    }),
    Components({
      resolvers: [ElementPlusResolver({
       importStyle: 'sass'
      })],
      dts: './components.d.ts'
    }),
    ElementPlus({
      useSource: true,
    }),
  ],
});
